/*
 * @Author: FengKongLi 
 * @Date: 2021-09-17 17:00:42 
 * @Last Modified by: FengKongLi
 * @Last Modified time: 2021-09-23 09:25:49
 */
<template>
  <div>
    <!-- 头部开始 -->
    <div class="topLine">
      <div class="wrapper">
        <div>广西科技大学新闻网欢迎您！</div>
        <div class="mian" @click="toHome">学校主页</div>
      </div>
    </div>
    <div class="headerTop">
      <div class="wrapper">
        <div class="logo">
          <img src="../../assets/logo.png" alt="" />
        </div>
        <ul class="list">
          <li
            v-for="item in headerTopList"
            :key="item.id"
            @click="toList(item.id)"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
    </div>
    <!-- 头部结束 -->
  </div>
</template>

<script>
import { categoryFindAll } from "../../api/home/home";

export default {
  data() {
    return {
      headerTopList: [],
    };
  },
  created() {
    this.getHeaderTopData();
  },
  methods: {
    // 轮播图数据获取
    async getHeaderTopData() {
      let res = await categoryFindAll();
      //  console.log(res.data);
      this.headerTopList = res.data;
    },
    // 点击跳转到主页
    toHome(){
      this.$router.push({path:'/home'})
    },
    // 点击跳转到列表
    toList(id) {
      this.$router.push({
        path: "/List",
        query: {
          categoryId: id,
        },
      });
    
    },
  },
};
</script>

<style lang='scss' scoped>
.wrapper {
  margin: auto;
}
.topLine {
  background-color: #324a9a;
  height: 50px;
  color: #fff;
  .wrapper {
    display: flex;
    justify-content: space-between;
    line-height: 50px;
    .mian{
      cursor: pointer;
    }
  }
}
.headerTop {
  display: flex;
  margin-top: 10px;
  .wrapper {
    display: flex;
    justify-content: space-between;
    line-height: 50px;

    .logo {
      flex: 1;
      img {
        width: 325px;
      height: 100%;
      }
    }
    .list {
      flex: 2;
      display: flex;
      justify-content: space-between;
      align-items: center;
      li {
        cursor: pointer;
        font-size: 20px;
      }
    }
  }
}
</style>